<template>
    <view class="iconfont" v-if="name" :class="active?'active':''">
        <i :class="'icon-'+name" :style="myStyle"></i>
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: "font-ico",
        props: {
            /**
             * 字体class名称 不包含icon-
             */
            name: {
                type: String
            },
            /*
            是否激活状态
             */
            active: {
                type: Boolean
            },
            /**
             * 图标大小 单位rpx
             */
            size: {
                type: Number,
                default: 24
            },
            /**
             * 非激活状态下颜色
             */
            color: {
                type: String
            },
            /**
             * 激活状态下颜色
             */
            activeColor: {
                type: String,
                default: '#1D83EF'
            }
        },
        computed: {
            myStyle() {
                const result = {
                    'font-size': uni.upx2px(this.size) + 'px',
                };
                if (this.active) {
                    result.color = this.activeColor;
                } else {
                    if (this.color) {
                        result.color = this.color;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .iconfont {
        display: inline-block;
    }
</style>
